// pages/service/statistics.js
import * as echarts from '../../ec-canvas/echarts';
var utl = require('../../utils/util.js');

function initCharts(canvas, width, height) {
  const chart = echarts.init(canvas, null, {
    width: width,
    height: height
  });
  canvas.setChart(chart);

  var option = {
    backgroundColor: "#ffffff",
    color: ["#9779FB", "#77DFE0", "#069CD4"],
    legend: {
      orient: 'vertical',
      left: 'left',
      formatter: "{name}",
      show: false
    },

    tooltip: {
      formatter: "{b}:{d}%"
    },

    series: [{
      label: {
        normal: {
          fontSize: 14
        }
      },
      name: '访问来源',
      type: 'pie',
      center: ['60%', '45%'],
      radius: '70%',
      data: [{
        value: 20,
        name: '收入'
      }, {
        value: 10,
        name: '支出'
      }],
      itemStyle: {
        emphasis: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 2, 2, 0.3)'
        }
      }
    }]
  };

  chart.setOption(option);
  return chart;
}

function initChart(canvas, width, height) {
  const chart = echarts.init(canvas, null, {
    width: width,
    height: height
  });
  canvas.setChart(chart);

  var option = {
    color: ["#9EB0FF", "#FF8671"],
    legend: {
      data: ['每日收款', '每日付款'],
      top: 0,
      left: 'center',
      backgroundColor: 'white',
      z: 100
    },
    grid: {
      containLabel: false
    },
    tooltip: {
      show: true,
      trigger: 'axis',
      position: ['50%', '50%'],
    },
    xAxis: {
      type: 'category',
      data: ['0:00', '4:00', '8:00', '12:00', '16:00', '20:00', '24:00'],
      axisTick: {
        show: false
      },
    },
    yAxis: {
      x: 'center',
      type: 'value',
      axisLine: {
        show: false
      },
      // axisLabel: {
      //   show: false
      // },
      axisTick: {
        show: false
      },
      splitLine: {
        lineStyle: {
          type: 'line'
        }
      },
      // show: false/
    },
    series: [{
      name: '每日收款',
      type: 'line',
      smooth: false,
      data: [18, 36, 65, 30, 78, 40, 33, 55, 18, 36, 65, 30, 78, 40, 33, 55]
    }, {
      name: '每日付款',
      type: 'line',
      smooth: false,
      data: [12, 50, 51, 35, 70, 30, 20]
    }]
  };

  chart.setOption(option);
  return chart;
}
Page({
  data: {
    ecs: {
      onInit: initCharts
    },
    ec: {
      onInit: initChart
    },
    date: '',
    month: '',
    ndate: '',
    nmonth: '',
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {
    var timestamp = Date.parse(new Date());
    var date = new Date(timestamp);
    //获取年份
    var Y = date.getFullYear();
    //获取月份  
    var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1);
    //获取当日日期
    var D = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
    console.log("当前时间：" + Y + '年' + M + '月' + D + '日');
    this.setData({
      date: Y + '-' + M + '-' + D,
      month: Y + '-' + M,
      ndate: Y + '-' + M + '-' + D,
      nmonth: Y + '-' + M
    })
    this.queryMoney('M');


  },
  queryMoney: function(e) {
    var start = '';
    var end = '';
    if (e == 'D') {
      var day = this.data.date;
      start = day;
      end = day;
    } else {
      var mth = this.data.month;
      start = mth + "-1";
      end = mth + "-31";
    }
    wx.showLoading({
      title: '请求中...',
    })
    utl.serverToken('USER_CAPITAL', {
      'START_TIME': start,
      'END_TIME': end
    }, (err, res) => {
      wx.hideLoading();
      if (err) {
        wx.showToast({
          title: err,
          icon: 'none',
          duration: 2000
        })
        return;
      }


    })
  },
  //日期选择
  bindDateChange: function(e) {
    console.log('picker发送选择改变，携带值为', e.detail.value)
    this.setData({
      date: e.detail.value
    })
    this.queryMoney('D');
  },
  bindYearChange: function(e) {
    this.setData({
      month: e.detail.value
    })
    this.queryMoney('M');
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function() {

  }
})